<template>
    <div>
        <slider  :announcement="announcement" :sliders="sliders"></slider>
        <booklist  :books="books"
                   heading="最新更新"
                   @onBookSelect="preview($event)"></booklist>
        <booklist   :books="recommended"
                    heading="编辑推荐"
                    @onBookSelect="preview($event)"></booklist>
        <model-dialog ref="dialog">
            <div slot="heading"></div>
            <div>
                <div v-if="selected">
                    <h2>{{ selected.title }}</h2>
                </div>
            </div>
        </model-dialog>
    </div>
</template>
<script type="text/ecmascript-6">
    import slider from "./slider.vue"
    import booklist from "./BookList.vue"
    import ModelDialog from "./dialog.vue"
    export default{
        components: {slider, booklist,ModelDialog},
        data(){
            return {
                announcement: '',
                sliders:[],
                books:[],
                recommended:[],
                selected:undefined
             /*   sliders: [
                    {img_url: require('./fixtures/sliders/t1.svg')},
                    {img_url: require('./fixtures/sliders/t2.svg')}
                ],
                recommended:[  {img_url: require('./fixtures/covers/4.svg'), title: "高级进阶", authors: "顾浩鑫"},
                    {img_url: require('./fixtures/covers/5.svg'), title: "淘宝天猫电商运营与数据化选品完全手册", authors: "老夏"},
                    {img_url: require('./fixtures/covers/6.svg'), title: "大数据架构详解：从数据获取到深度学习", authors: "朱洁，罗华霖"},
                ],
                books: [
                    {img_url: require('./fixtures/covers/1.svg'), title: "揭开数据真相：从小白到数据分析达人", authors: "Edward Zaccaro,Daniel Zaccaro"},
                    {img_url: require('./fixtures/covers/2.svg'), title: "高级进阶", authors: "顾浩鑫"},
                    {img_url: require('./fixtures/covers/3.svg'), title: "淘宝天猫电商运营与数据化选品完全手册", authors: "老夏"},
                ]*/
            }
        },
        created(){
            this.$http.get('data.json').then(res=>{
                this.announcement = res.body.announcement
                this.slides =res.body.slides
                this.books =res.body.books
                this.recommended =res.body.recommended
            })
        },
        methods: {
            preview (book) {
                this.selected = book
                this.$refs.dialog.open()
            }
        }
    }
</script>